<template>
	<view>
		<view class="wrap">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
					:label-position="labelPosition" label="用户名" prop="name">
					<u-input :border="border" placeholder="请输入用户名" v-model="model.name" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="密码" prop="password" label-width="120">
					<u-input :password-icon="true" :border="border" type="password" v-model="model.password"
						placeholder="请输入密码"></u-input>
				</u-form-item>
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
					:label-position="labelPosition" label="邮箱" prop="name">
					<u-input :border="border" placeholder="请输入邮箱账号" v-model="model.email" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="120">
					<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
			</u-form>
			<u-button style="margin-top: 30px; width:100px;float: left;margin-left: 45px;" type="success" text="登录">
			</u-button>
			<u-button style="margin-top: 30px; width:100px;" type="success" text="注册"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email:'',
				labelPosition: 'left',
				border: 'false', 
				codeTips: '获取验证码',
				errorType: 'toast', //还支持(可多选搭配使用):'border-bottom','border','message'
				model: {
					code: '',
					password: '',
					
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 3,
							max: 5,
							message: '姓名长度在3到5个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
				},
				
			}
		},
		methods: {
			 submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        if (!this.model.agreement) return this.$u.toast('请勾选协议');
                        console.log('验证通过');
                    } else {
                        console.log('验证失败');
                    }
                });
            },
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
		// max-height: 100%;
		// overflow: scroll;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: #909399;
		}
	}
</style>
